<template>
  <div class="tab_box">

    <!--标题栏-->
    <header class="header-top background-ffffff border-b-line clearfix header_topcolor333" id='header'>
      <a class="header-title" href="javascript:;" @click="returnUp()"><i class="iconfont icon-fanhui p-r-05rem"></i></a>
      <h2 class="font-085rem text-center white-color" v-html="htmlTitle"></h2>
      <!--<a class="header-save" href="javascript:;" @click="saveToIndex()">保存</a>-->
    </header>


    <!--专业swiper选择-->
    <p class=" p-lr-065rem p-tb-05rem font-08rem color-999999">更换指标分类</p>
    <div class="swiper-container-major p-lr-065rem" id="targetSetSwiper">
      <div class="swiper-wrapper ">
        <!--name,status,industryCode-->
        <div class="swiper-slide p-tb-075rem" v-for="(item,index) in swiperData" :class="index == swiperIndex ? 'active':''" @click="BindUpadateIndexSorting(item.name,item.industryCode,$event);">
          <p class="p-b-05rem font-07rem text-center text-ellipsis" v-html="item.name"></p>
          <i class="iconfont icon-gou choose-boolean small-custom-icon"></i>
        </div>
        <!--<div class="swiper-slide p-tb-075rem" @click="BindUpadateIndexSorting($event);">
          <p class="p-b-05rem  font-07rem text-center text-ellipsis">运营类</p>
          <i class="iconfont icon-gou choose-boolean small-custom-icon"></i>
        </div>
        <div class="swiper-slide p-tb-075rem" @click="BindUpadateIndexSorting($event);">
          <p class="p-b-05rem font-07rem text-center text-ellipsis">房产类</p>
          <i class="iconfont icon-gou choose-boolean small-custom-icon"></i>
        </div>
        <div class="swiper-slide p-tb-075rem" @click="BindUpadateIndexSorting($event);">
          <p class="p-b-05rem  font-07rem text-center text-ellipsis">工程类</p>
          <i class="iconfont icon-gou choose-boolean small-custom-icon"></i>
        </div>
        <div class="swiper-slide p-tb-075rem" @click="BindUpadateIndexSorting($event);">
          <p class="p-b-05rem  font-07rem text-center text-ellipsis">信息类</p>
          <i class="iconfont icon-gou choose-boolean small-custom-icon"></i>
        </div>-->
      </div>
      <!-- Add Pagination -->
      <!--<div class="swiper-pagination"></div>-->
    </div>


    <!--更换背景-->
    <div class="m-tb-075rem">
      <a href="javascript:;" class="clearfix dis-block line-h-26rem font-08rem p-lr-065rem background-ffffff" id='showMaterPicker'>
        <div class="co-fl">背景</div>
        <i class="turn-right-arrow co-fr m-t-10rem p-l-025rem"></i>
        <div class="co-fr color-999999" id='MaterResult' >性感黑色图片</div>
      </a>
      <div class="line-1"></div>
    </div>


    <!--指标类型勾选的专业-->
    <div class="background-ffffff p-tb-05rem">
      <p class="p-b-05rem p-lr-065rem border-b-line color-999999">{{userName}}-{{listTitle}}指标</p>
      <div style="height: 18rem;" class="overflow-scroll">
        <scroller :on-infinite="infinite"  ref="indexsublist" class="">
          <ul id="chooseTargetList" class="choose-target-down m-t-05rem">
            <li class="p-lr-075rem" v-for="(item,index) in settingList">
              <a href="javascript:;">
                <span class="left-icon iconfont icon-zuoce-chezhan co-fl"></span>
                <p class="w80 text-ellipsis co-fl font-07rem">{{item.indexName}}<span class="color-999999">-{{item.parent.indexName}}</span></p>
                <i class="iconfont icon-gou small-custom-icon choose-boolean co-fr" :class="{'cur':item.subStatus}" :data-indextype=item.indexType :data-indexcode=item.indexCode :data-indexname=item.indexName></i>
              </a>
            </li>
          </ul>
        </scroller>
      </div>
    </div>

    <loading v-show="FangLoading"></loading>
    <fangerror :fangerroring="fangerroring" :fangerrorText="fangerrorText"></fangerror>

  </div>
</template>

<script src="../../../static/js/target-set.js"></script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../static/plugins/swiper4x/swiper.min.css"
  @import "../../../static/css/metro-target-set.css"
</style>
